<template>
  <div class="creatorDiv">
    <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <div class="countFunctionDiv">
          <h2>收藏量</h2>
          <div style="margin-left: 10px">
            <h3>{{ collectNum }}(个)</h3>
          </div>
        </div>
        <div class="countFunctionDiv">
         <h2>浏览量</h2>
          <div style="margin-left: 10px">
            <h3>{{ pageView }}(次)</h3>
          </div>
        </div>
        <div class="countFunctionDiv">
          <h2>点赞量</h2>
          <div style="margin-left: 10px">
            <h3>{{ like }}(个)</h3>
          </div>
        </div>
        <div class="countFunctionDiv">
          <h2>粉丝量</h2>
          <div style="margin-left: 10px">
            <h3>{{ attentionNum }}(位)</h3>
          </div>
        </div>
    </div>

    <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-top: 30px">
      <el-tabs v-model="activeName" style="margin: 2%">
        <el-tab-pane label="帖子管理" name="first">
          <el-table height="490px" :data="articleList" style="width: 100%">
            <el-table-column prop="articleId" label="编号" width="180" />
            <el-table-column prop="articleTitle" label="标题" width="180"/>
            <el-table-column prop="articlePageView" label="浏览量" width="180" />
            <el-table-column prop="articleLike" label="点赞量" width="180" />
            <el-table-column prop="commentSize" label="评论量" width="100" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteArticle(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="文章管理" name="second">
          <el-table height="490px" :data="postList" style="width: 100%">
            <el-table-column prop="articleId" label="编号" width="180" />
            <el-table-column prop="articleTitle" label="标题" width="180" />
            <el-table-column prop="articlePageView" label="浏览量" width="180" />
            <el-table-column prop="articleLike" label="点赞量" width="180" />
            <el-table-column prop="commentSize" label="评论量" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteArticle(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="评论管理" name="third">
          <h3>评论作品</h3>
          <el-divider />
          <el-table height="330px" :data="commentData" style="width: 100%">
            <el-table-column prop="commentId" label="编号" width="180" />
            <el-table-column prop="commentContent" label="内容" width="180" />
            <el-table-column prop="commentCreatingTime" label="创建时间" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="deleteComment(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <h3>回复评论</h3>
          <el-divider />
          <el-table height="350px" :data="replyData" style="width: 100%">
            <el-table-column prop="commentId" label="编号" width="180" />
            <el-table-column prop="commentContent" label="内容" width="180" />
            <el-table-column prop="commentCreatingTime" label="创建时间" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="deleteComment(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" title="编辑页面" :lock-scroll="false" width="97%">
          <div style="display: inline-block;width: 80%">
            <el-input placeholder="请输入标题" v-model="articleContentItem.articleTitle" />
          </div>
          <div style="display: inline-block;width: 19%">
            <el-button style="width: 100%" type="primary" @click="updateArticle()">修改</el-button>
          </div>
          <br>
          <br>
          <mavon-editor
              ref="md"
              :toolbars="toolbars"
              style="z-index: 1;min-height: 380px"
              v-model="articleContentItem.articleContent"
              :ishljs="true"
              @imgAdd="imgAdd" />
    </el-dialog>
  </div>
</template>

<script>
import request from "../../../utils/request";

export default {
  name: "creator",
  data:function (){
    return{
      dialogFormVisible:false,
      activeName:"first",
      tabPosition:"left",
      usersId:"",
      attentionNum:"",
      collectNum:"",
      like:"",
      pageView:"",
      commentData:[],
      replyData:[],
      postList:[],
      articleList:[],
      articleContentItem:{},
      allImage:[],
      submitState:false,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
      }
    }
  },
  methods:{
    deleteComment(row){
      this.$confirm('确认删除吗？')
          .then(_ => {
            done();
          })
          .catch(_ => {
            request.delete('/comment/deleteComment/'+row.commentId).then()
            this.$message.success("删除成功！")
            location.reload()
          });
    },
    deleteArticle(row){
      this.$confirm('确认删除吗？')
          .then(_ => {
            done();
          })
          .catch(_ => {
            request.delete('/article/deleteArticle/'+row.articleId).then();
            this.$message.success("删除成功！")
            location.reload()
          });
    },
    updateArticle(){
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      this.articleContentItem.articleCreatingTime=y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      request.post('/article/updateArticle',this.articleContentItem)
      this.submitState=true
      this.dialogFormVisible=!this.dialogFormVisible;
      this.$message.success("成功修改！")
      location.reload()
    },
    handleClose(done){
      this.$confirm('现在关闭无法保存当前修改哦~确定退出吗?')
          .then(_ => {
            if (this.allImage.length !== 0 && this.submitState === false){
              request.delete('/file/delete/?allImage='+this.allImage)
            }
            done();
          })
          .catch(_ => {});
    },
    imgAdd (pos, $file) {
      let $vm = this.$refs.md
      const formData = new FormData()
      formData.append('file', $file)
      request({
        url: '/file/upload',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        //    this.$vm.$img2Url(pos, url.data);
        if (this.global.recommendImg === "http://localhost:8080"){
          this.allImage.push(res.msg.substring(33))
        }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
          this.allImage.push(res.msg.substring(39))
        }
        $vm.$img2Url(pos, res.msg);
      })
    },
    handleClick(row){
      this.dialogFormVisible=!this.dialogFormVisible;
      request.get('/article/getCompileArticle/'+row.articleId).then(res=>{
        this.articleContentItem=res.data
      })
    },
    initCreator(){
      request.get('/attention/selectUsersCreatorData/'+this.usersId).then(res =>{
        this.attentionNum=res.data.attentionNum;
        this.collectNum=res.data.collectNum;
        this.like=res.data.like;
        this.pageView=res.data.pageView;
      })
      request.get('/comment/selectUsersComment/'+this.usersId).then(res =>{
        this.commentData=res.commentData;
        this.replyData=res.replyData;
      })
      request.get('/article/selectUserMsgArticle/'+this.usersId).then(res =>{
        this.postList=res.data.postList;
        this.articleList=res.data.articleList;
      })
    }
  },
  created() {
    this.usersId=this.$route.params.usersId;
  },
  mounted() {
    document.title="创作中心 - 贴乎";
    this.initCreator()
  },
}
</script>

<style scoped>
.creatorDiv{
  margin: 0 auto;
  margin-top: 50px;
  max-width: 980px;
}
.countFunctionDiv{
  display: inline-block;margin-top: 20px;margin-left: 120px;margin-bottom: 20px;
}
</style>